<template>
  <div id="home">
  <my-skeleton v-if="initLoading"></my-skeleton>
  <template v-else>
    <div id="navbar">
      <nav-bar></nav-bar>
      <div class="navbar-banner">
        <div class="applogo"><img src="img/logo40x40.png" width="40" height="40"></div>
        <div class="appinfo">
          <p class="appinfo-h">喜阅App</p>
          <p class="appinfo-p">记录美好生活</p>
        </div>
        <div class="app-add" @click="$toast('App暂未上线')">获取App</div>
      </div>
    </div>
    <section>
      <div class="labelbar">
        <title-bar>
          <span slot="title">喜阅热门</span>
          <template slot="more"><router-link to="/more/hot">浏览更多</router-link></template>
        </title-bar>
      </div>
      <div class="contentbar"><swipe-bar :data="datalist.hot"></swipe-bar></div>
    </section>
    <section>
      <div class="labelbar">
        <title-bar :CPNsign="false">
          <span slot="title">喜阅榜单</span>
          <template slot="more"><span></span></template>
        </title-bar>
      </div>
      <top-card :data="datalist.top.week" CPNhref="/more/top/week" CPNimgurl="img/week_bg.jpg">
        <span slot="bd-label">WEEK</span>
        <span slot="s-label">喜阅周榜</span>
        <span slot="l-label">好看小说</span>
      </top-card>
      <top-card :data="datalist.top.all" CPNhref="/more/top/all" CPNcolor="#32323b" CPNimgurl="img/all_bg.jpg">
        <span slot="bd-label">TOPALL</span>
        <span slot="s-label">喜阅总榜</span>
        <span slot="l-label">流量小说</span>
      </top-card>
    </section>
    <section>
      <div class="labelbar">
        <title-bar>
          <span slot="title">分类浏览</span>
          <template slot="more"><router-link to="/more/kind">浏览更多</router-link></template>
        </title-bar>
      </div>
      <div v-for="(item,index) in datalist.kind" :key="index" >
        <kind-label :to="'/kind/'+item.id"><template slot="label">{{item.kind}}</template></kind-label>
        <div class="contentbar"><flex-row :data="item.data"></flex-row></div>
      </div>
    </section>
    <section>
      <div class="labelbar">
        <title-bar :CPNsign="false">
          <span slot="title">找小说</span>
          <span slot="more"></span>
        </title-bar>
      </div>
      <book-list :data="datalist.booklist"></book-list>
    </section>
    <load-more :show="dataLoading"></load-more>
    <to-top v-show="showTop"></to-top>
  </template>
  </div>
</template>

<script>
import MySkeleton from '@/components/MySkeleton.vue'
import TitleBar from '@/components/TitleBar.vue'
import SwipeBar from '@/components/SwipeBar.vue'
import FlexRow from '@/components/FlexRow.vue'
import KindLabel from '@/components/KindLabel.vue'
import TopCard from '@/components/TopCard.vue'
import BookList from '@/components/BookList.vue'
import NavBar from '@/components/NavBar.vue'
import ToTop from '@/components/ToTop.vue'
import LoadMore from '@/components/LoadMore.vue'
export default {
  name: 'Home',
  components: {
    MySkeleton,
    TitleBar,
    SwipeBar,
    FlexRow,
    KindLabel,
    TopCard,
    BookList,
    NavBar,
    ToTop,
    LoadMore
  },
  data(){
    return {
      initLoading: true,
      dataLoading: false,
      scrollEvent:null,
      showTop:false,
      datalist: null
    }
  },
  methods:{
    
    scrollevent(){
      let docEl = document.documentElement,
        body = document.body,
        ajax = null,that = this;
      return function(){ 
        let scrollTop = docEl.scrollTop || body.scrollTop
        if(scrollTop > docEl.clientHeight){
          that.showTop = true
        }else{
          that.showTop = false
        }
        if(!ajax && scrollTop + docEl.clientHeight >= docEl.scrollHeight) {
          if(!navigator.onLine){
            that.$toast({
              message:'现在处于离线浏览',
              position: 'bottom'
            });
            return 
          }
          that.dataLoading = true;
          ajax = that.$http.get("/booklist.php")
          .then(res => {
            setTimeout(()=>{
              that.dataLoading = false
              that.datalist.booklist = that.datalist.booklist.concat(res.data.data.datalist)
              ajax = null
            },1000)

          })
          .catch(err => {
            throw ('加油！奥里给!')
          })
        }
      }
    }
  },
  created(){
    this.$http.get('/bookindex.php')
    .then(res => {
      this.initLoading = false
      this.datalist = res.data.data;
    })
    .catch(err => {
      throw ('ERROR!')
    })
   
  },
  mounted(){  
    this.scrollEvent = this.scrollevent()
    window.addEventListener('scroll', this.scrollEvent)
  },
  destroyed(){
    window.removeEventListener('scroll', this.scrollEvent);
  }
}
</script>

<style>

.navbar-banner{
  display: flex;
  box-sizing: border-box;
  padding: 0 18PX;
  width: 100%;
  height: 60PX;
  border-bottom: 1PX solid #ebebeb;
  align-items: center;
  background-color: #f7f7f7;
}
.navbar-banner .applogo{
  flex: 40PX 0 0;
  line-height: 0;
  margin-right: 15PX;
}
.applogo>img{
  border-radius: 8PX;
}
.navbar-banner .appinfo{
  flex: 1;
}
.appinfo-h{
  font-size: 14PX;
}
.appinfo-p{
  font-size: 12PX;
  color: #818181;
}
.navbar-banner .app-add{
  flex: 80PX 0 0;
  line-height: 30PX;
  text-align: center;
  font-size: 14PX;
  border-radius: 15PX;
  color: #fff;
  background: #ff5722;
}
.labelbar{
  margin-bottom: 20px;
}
#home section{
  padding: 15px 0;
}

</style>